<template>
  <view class="container">
    <view class="tab-bar">
      <view :class="{ active: tab === 0 }" @click="tab = 0" class="tab-item">球台设备</view>
      <view :class="{ active: tab === 1 }" @click="tab = 1" class="tab-item">配套设施</view>
    </view>

    <!-- 球台设备 -->
    <view v-if="tab === 0" class="facility-list">
      <view class="facility-card" v-for="(item, i) in tableList" :key="i">
        <image :src="item.img" class="facility-img"></image>
        <view class="facility-info">
          <text class="facility-title">{{ item.title }}</text>
          <text class="facility-desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>

    <!-- 配套设施 -->
    <view v-if="tab === 1" class="support-list">
      <view class="support-item" v-for="(item, i) in supportList" :key="i">
        <image :src="item.icon" class="support-icon"></image>
        <text class="support-text">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tab: 0,
      // 乒乓球台设备
      tableList: [
        {
          title: '国际标准赛台',
          desc: '采用ITTF认证的高密度纤维板台面，弹性系数220-250N/m，台高76cm，台长274cm，台宽152.5cm，边框为优质铝合金材质，确保专业竞技体验。',
          img: '/static/image/table.png'
        },
        {
          title: '专业训练球台',
          desc: '适合进阶训练的半专业球台，台面耐磨防潮，配备可调节脚架适应不同地面，周边预留1.5米以上运动空间，避免碰撞干扰。',
          img: '/static/image/table.png'
        },
        {
          title: '儿童专用球台',
          desc: '高度可调节（50-70cm），台面缩小至标准尺寸的70%，配备软包边框，适合6-12岁儿童启蒙训练，降低运动风险。',
          img: '/static/image/table.png'
        }
      ],
      // 配套设施
      supportList: [
        {
          icon: '/static/icon/light.png',
          desc: '专业无影灯光：采用4000K自然光色温，照度达750lux，均匀覆盖球台区域，无眩光无阴影，符合国际比赛标准'
        },
        {
          icon: '/static/icon/machine.png',
          desc: '智能发球机：可调节发球速度（10-80km/h）、旋转方式（上旋/下旋/侧旋），支持多落点随机模式，适合单人训练'
        },
        {
          icon: '/static/icon/racket.png',
          desc: '器材区：提供专业球拍（横拍/直拍）、三星级比赛用球、防滑运动袜等，支持购买与租赁，所有器材定期保养'
        },
        {
          icon: '/static/icon/rest.png',
          desc: '观赛休息区：配备高清直播屏幕（可回放训练动作）、舒适座椅、充电站，提供茶水服务，方便陪同人员等候'
        }
      ]
    };
  }
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}
.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}
.tab-item.active {
  color: #FF4D00;
}
.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 6rpx;
  background: #FF4D00;
  border-radius: 3rpx;
}
.facility-list, .support-list {
  padding: 20rpx;
}
.facility-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}
.facility-img {
  width: 100%;
  height: 300rpx;
  object-fit: cover;
}
.facility-info {
  padding: 30rpx;
}
.facility-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 15rpx;
}
.facility-desc {
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
}
.support-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}
.support-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
  margin-top: 5rpx;
}
.support-text {
  font-size: 26rpx;
  color: #666;
  line-height: 40rpx;
  flex: 1;
}
</style>